import * as echarts from "echarts";
import { useEffect, useRef } from "react";
export default function Sort() {
  const timerRef = useRef(null);

  useEffect(() => {
    var chartDom = document.getElementById("sort");
    // 获取实例
    var myChart = echarts.getInstanceByDom(chartDom);
    if (!myChart) {
      // 如果不存在则创建{myChart = echarts.init(chartDom)
      myChart = echarts.init(chartDom);
    }

    function getPageList(arrays, pageNum, pageSize) {
      //计算分页页数
      pageNum--;
      const dataList = [];
      // 总数据长度
      const pageRows = arrays.length;
      // const pageTotal = (pageRows + pageSize - 1) / pageSize;
      //循环判断值
      // console.log("结束", pageNum, pageSize);
      let startIndex = pageNum <= 0 ? 0 : pageNum * pageSize;
      // console.log("startIndex", startIndex);
      let endIndex =
        (pageNum + 1) * pageSize > pageRows
          ? pageRows
          : (pageNum + 1) * pageSize;
      if (startIndex > pageRows) return dataList;
      for (startIndex; startIndex < endIndex; startIndex++) {
        dataList.push(arrays[startIndex]);
      }
      return dataList;
    }

    let yLabel = [
      "白云湖街道",
      "人和镇",
      "钟落潭镇",
      "太和镇",
      "太原街道",
      "永平街道",
      "龙归街道",
      "嘉禾街道",
      "均禾街道",
      "石门街道",
      "石井街道",
      "同和街道",
      "金沙街道",
    ];
    // 每页展示4条
    let pageNum = 1,
      pageSize = 4;
    var baseRows = getPageList(yLabel, pageNum, pageSize);

    let yData = [];
    baseRows.forEach((item) => {
      yData.push(Math.random() * 1000);
    });
    let bgData = [];
    for (let i in yData) {
      bgData.push(2000);
    }

    var option = {
      grid: {
        left: "1%",
        right: "1%",
        bottom: "1%",
        top: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none",
        },
        formatter(params) {
          return (
            params[0].name +
            "<br/>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
            params[0].seriesName +
            " : " +
            params[0].value +
            " <br/>"
          );
        },
      },
      xAxis: {
        show: false,
        type: "value",
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLabel: {
            show: true,
            margin: 15,
            color: "#fff",
            fontSize: "16",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: baseRows,
        },
        {
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            color: "#9aeced",
            fontSize: "16",
          },
          data: yData,
        },
      ],
      series: [
        {
          name: "人数",
          type: "bar",
          zlevel: 1,
          itemStyle: {
            borderRadius: [0, 50, 50, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#52d8da",
              },
              {
                offset: 1,
                color: "#57dcde",
              },
            ]),
            shadowBlur: 0,
            shadowColor: "rgba(87,220,222,1)",
          },
          barWidth: 16,
          data: yData,
        },
        {
          name: "背景",
          type: "bar",
          barWidth: 16,
          barGap: "-100%",
          data: bgData,
          itemStyle: {
            color: "rgba(24,31,68,1)",
          },
        },
      ],
    };

    timerRef.current = setInterval(() => {
      pageNum++;
      var rows = getPageList(yLabel, pageSize + pageNum, 1);
      if (rows.length === 0) {
        pageSize = 0;
        pageNum = 0;
        return;
      }
      //原始数组
      baseRows.splice(0, 1);
      baseRows.push(...rows);
      //原始数组y刻度值
      yData.splice(0, 1);
      rows.forEach((item) => {
        yData.push(Math.random() * 1000);
      });
      //x轴
      bgData.splice(0, 1);
      rows.forEach((item) => {
        bgData.push(2000);
      });

      myChart.setOption({
        yAxis: [
          {
            data: baseRows,
          },
          {
            data: yData,
          },
        ],
        series: [
          {
            name: "人数",
            data: yData,
          },
          {
            name: "背景",
            data: bgData,
          },
        ],
      });
    }, 4000);

    // 把配置给实例对象
    myChart.setOption(option);

    // 清除影响
    return () => {
      clearInterval(timerRef.current);
    };
  }, []);

  return (
    <div className="panel-right-box panel-rightborder">
      <div className="panel-right">
        <h2>排名统计</h2>
        <div id="sort" style={{ width: "100%", height: "100%" }}></div>
      </div>
    </div>
  );
}
